<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改个人密码</title>
    <link rel="stylesheet" type="text/css" href="../css/change_pwd_style.css">
    <script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
    <script type="text/javascript" src="../js/commons.js"></script>
</head>
<body>
<form onsubmit="return change()" method="post">
    <div class="pwd_div">
        <h2>修改密码</h2>
        <div class="pwd_box">
            <input type="text" name="username" id="username" autocomplete="off" required="required"/>
            <label for="username">请输入手机号</label>
        </div>
        <div class="pwd_box">
            <input type="password" name="password" id="password" autocomplete="off" required="required"/>
            <label for="password">请输入新密码</label>
        </div>
        <div class="pwd_box">
            <input type="password" name="password" id="rep_password" autocomplete="off" required="required"/>
            <label for="rep_password">请再次输入新密码</label>
        </div>
        <div class="pwd_box">
            <input type="text" name="code" id="code" autocomplete="off" required="required"/>
            <label for="code">请输入验证码</label>
        </div>
        <!-- 提示信息 -->
        <p id="msg"></p><br>
        <div class="code_btn">
            <input type="button" name="get_code" id="get_code" value="获取验证码"/>
        </div>
        <input type="submit" class="change" value="确认修改"/>
        <a href="login.html" id="to_login">去登录</a>
    </div>
</form>

<script>
    // 验证码按钮样式
    $("#get_code").click(function () {
        let count = 60;
        let phone = $('#username').val();
        let flag = false;
        // 移动 联通  电信
        const regular = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/;
        let message = "";
        if ("" === phone) {
            message = "手机号码不能为空！";
            $('#msg').text(message);
            $("#msg").show().delay(2000).fadeOut();
        } else if (phone.length !== 11) {
            message = "请输入正确的手机号码！";
            $('#msg').text(message);
            $("#msg").show().delay(2000).fadeOut();
        } else if (!regular.test(phone)) {
            message = "请输入正确的手机号码！";
            $('#msg').text(message);
            $("#msg").show().delay(2000).fadeOut();
            /*        }else if(checkPhoneIsExist()){
                        message = "该手机号码已经被绑定！";
                        console.log(message);
                        $('#msg').text(message);
                        $("#msg").show().delay(1000).fadeOut();*/
        } else {
            if (count === 60) {
                const countDown = setInterval(() => {
                    if (count === 0) {
                        $("#get_code").attr("value", "重新获取").removeAttr('disabled');
                        $("#get_code").css({
                            background: '#ff9400',
                            color: '#fff',
                        });
                        clearInterval(countDown);
                    } else {
                        $("#get_code").attr('disabled', "true");
                        $("#get_code").css({
                            background: 'rgb(255,255,255)',
                            color: 'rgb(0,0,0)',
                        });
                        $("#get_code").attr("value", "重新获取(" + count + ")");
                    }
                    count--;
                }, 1000);
            }

        }

    });

    // 确认密码验证
    $("#rep_password").blur(function () {
        let pwd1 = $("#password").val();
        let pwd2 = $("#rep_password").val();
        let message = "";
        if (pwd1 !== pwd2 && ""!== pwd1) {
            message = "两次输入密码不一致！";
            $('#msg').text(message);
            $("#msg").show().delay(2000).fadeOut();
            $("#rep_password").val("");
        }
    });

    function change() {

    };
</script>
</body>
</html>